<template>
  <div>
    <el-row :gutter="20">
      <!-- 左 -->
      <el-col :span="17"
        ><div class="grid-content bg-purple">
          <!-- 上 -->
          <el-row :gutter="20">
            <el-col :span="12"
              ><div
                class="grid-content bg-purple"
                style="backgroundColor: #e9f3ff"
              >
                <div class="header">
                  <h3>
                    工单统计<span
                      style="fontSize: 16px; color: #999; paddingLeft: 10px"
                      >{{ month }}~{{ nowDate }}</span
                    >
                  </h3>
                </div>
                <div class="bottom">
                  <div>
                    <h2>{{ allTask }}</h2>
                    <p>工单总数（个）</p>
                  </div>
                  <div>
                    <h2>0</h2>
                    <p>完成工单（个）</p>
                  </div>
                  <div>
                    <h2>0</h2>
                    <p>进行工单（个）</p>
                  </div>
                  <div>
                    <h2>{{ delTask }}</h2>
                    <p>取消工单（个）</p>
                  </div>
                </div>
              </div></el-col
            >

            <el-col :span="12"
              ><div
                class="grid-content bg-purple"
                style="backgroundColor: #fbefe8"
              >
                <h3>
                  销售额统计<span
                    style="fontSize: 16px; color: #999; paddingLeft: 10px"
                    >{{ month }}~{{ nowDate }}</span
                  >
                </h3>
                <div class="bottom">
                  <div>
                    <h2>{{ orderCount }}</h2>
                    <p>订单量（个）</p>
                  </div>
                  <div>
                    <h2>{{ orderAmount }}</h2>
                    <p>销售额（万元）</p>
                  </div>
                </div>
              </div></el-col
            >
          </el-row>
          <!-- 下 -->

          <el-row :span="24"><el-col :span="12" style="position:relative"
              ><h3 style="position: absolute;top:0;left: 0">
                    销售额趋势<span
                      style="fontSize: 16px; color: #999; paddingLeft: 10px"
                      >{{ start }}~{{ nowDate }}</span
                    >
                  </h3>
              <div
                class="grid-content bg"
                style="backgroundColor: #e9f3ff;height:352px;marginTop:50px"
                ref="sale"
              ></div></el-col><el-col :span="12" style="position:relative"
              ><div
                class="grid-content bg"
                style="backgroundColor: #e9f3ff;height:352px;marginTop:50px"
                ref="region"
              ></div><el-button-group style="position: absolute;top:0;left: 290px">
  <el-button type="primary" @click="type=0">周</el-button>
  <el-button type="primary" @click="type=1">月</el-button>
  <el-button type="primary" @click="type=2">年</el-button>
</el-button-group></el-col></el-row></div
      ></el-col>

      <!-- 右 -->
      <el-col :span="7"><div class="grid-content bg-purple">
        <dl>
          <dt> <h3>
                    工单统计<span
                      style="fontSize: 16px; color: #999; paddingLeft: 10px"
                      >{{ month }}~{{ nowDate }}</span
                    >
                  </h3></dt>
          <dd v-for="(item,index) in skuTop" :key="index">
            <div class="rank"><span :style="bgi(index)">{{index+1}}</span>
            <p>{{item.skuName}}</p><span>{{item.count}}</span></div></dd>
        </dl>
        </div></el-col>
    </el-row>
    <el-row :gutter="20">
  <el-col :span="16"><div class="grid-content bg-purple">
    <h3>
                    合作商位点数Top5
                  </h3>

<el-row>
  <el-col :span="16"><div class="grid-content bg-purple" ref="pie"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"><div class="count"><h3>{{nodeCount}}</h3><p>位点数</p>
                    <h3>{{partnerCount}}</h3><p>合作商数</p></div></div></el-col>
</el-row>

    </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple">
    <h3>异常设备数量</h3>
    <div class="bg" style="height:400px;width:400px"></div>
    </div></el-col>
</el-row>
  </div>
</template>

<script>
import { getOrderCount, getOrderAmount, getOrderAmountCollect, getregionCollect, getskuTop } from '@/api/order'
import { getTaskReportInfo, getPartnerCount } from '@/api/userService'
import { getnodeCollect, getNodeCount } from '@/api/vm'
import * as echarts from 'echarts'

export default {
  data () {
    return {
      orderCount: '',
      orderAmount: '',
      allTask: '',
      delTask: '',
      nowDate: '',
      month: '',
      type: 0,
      start: this.$moment().day(1).format('YYYY-MM-DD'),
      skuTop: [],
      nodeCollect: [],
      nodeCount: 0,
      partnerCount: 0
    }
  },
  async created () {
    this.handleDate()
    console.log(this.month)
    const timeStart = this.month + ' 00:00:00'
    const timeEnd = this.nowDate + ' 23:59:59'
    const orderCount = await getOrderCount(timeStart, timeEnd)
    this.orderCount = orderCount
    const orderAmount = await getOrderAmount(timeStart, timeEnd)
    this.orderAmount = (orderAmount / 1000000).toFixed(2)
    const taskInfo = await getTaskReportInfo(timeStart, timeEnd)
    const skuTop = await getskuTop(this.month, this.nowDate)
    this.skuTop = skuTop
    const nodeCount = await getNodeCount()
    this.nodeCount = nodeCount
    const partnerCount = await getPartnerCount()
    this.partnerCount = partnerCount
    this.allTask = taskInfo.reduce((sum, val) => sum + val.total, 0)
    this.delTask = taskInfo.reduce((sum, val) => sum + val.cancelTotal, 0)
  },
  mounted () {
    this.getSales()
    this.getRegion()
    this.createPie()
  },
  methods: {
    async getSales () {
      let saleData = []
      // 如果数据类型为周数据，改变x轴坐标
      if (this.type === 0) {
        saleData = await getOrderAmountCollect(this.start, this.nowDate, 1)
        const week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
        saleData.xAxis = saleData.xAxis.map((i, index) => {
          return week[index]
        })
      } else if (this.type === 2) {
        saleData = await getOrderAmountCollect(this.start, this.nowDate, 2)
      } else {
        saleData = await getOrderAmountCollect(this.start, this.nowDate, 1)
      }
      let isShow = true
      // 移除无图背景，如果数据为空，添加暂无图片
      this.$refs.sale.classList.remove('bg')
      console.log(this.$refs.sale.classList)
      if (!saleData.series.length === 0) {
        this.$refs.sale.classList.add('bg')
        isShow = false
      }

      // 如果数据类型为年数据，处理数据

      const mySaleChart = echarts.init(this.$refs.sale, null, {
        width: '476px',
        height: '278px'
      })
      const option = {
        title: {
          text: '销售额趋势图',
          textAlign: 'center',
          padding: [5, 0, 0, 250]
        },
        xAxis: {
          type: 'category',
          data: saleData.xAxis,
          show: isShow
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '25%'
        },
        legend: {
          top: '50px'
        },
        series: [
          {
            data: saleData.series,
            type: 'line',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(58,77,233,0.8)'
                },
                {
                  offset: 1,
                  color: 'rgba(58,77,233,0.3)'
                }
              ])
            }
          }
        ]
      }
      mySaleChart.setOption(option)
    },
    async getRegion () {
      const res = await getregionCollect(this.start, this.nowDate)
      this.$refs.region.classList.remove('bg')
      let isShow = true
      if (!res.series[0]) {
        this.$refs.region.classList.add('bg')
        isShow = false
      }
      const mySaleChart = echarts.init(this.$refs.region, null, {
        width: '476px',
        height: '278px'
      })
      const option = {
        title: {
          text: '销售额分布',
          textAlign: 'center',
          padding: [5, 0, 0, 250]
        },
        xAxis: {
          type: 'category',
          data: res.xAxis,
          show: isShow
        },
        grid: {
          left: '20%'
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: res.series,
            type: 'bar',
            barWidth: '25%'
          }
        ]
      }
      mySaleChart.setOption(option)
    },
    handleDate () {
      this.nowDate = this.$moment().format('YYYY-MM-DD')
      this.month = this.nowDate.slice(0, 8) + '01'
    },
    async createPie () {
      const nodeCollect = await getnodeCollect()
      this.nodeCollect = nodeCollect
      const myPie = echarts.init(this.$refs.pie, null, {
        width: '439px',
        height: '284px'
      })
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: 'Radius Mode',
            type: 'pie',
            radius: [20, 140],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5
            },
            label: {
              show: true
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: this.nodeCollect
          }
        ]
      }
      myPie.setOption(option)
    }
  },
  watch: {
    type (val) {
      switch (val) {
        case 0:
          this.start = this.$moment().day(1).format('YYYY-MM-DD')
          break
        case 1:
          this.start = this.nowDate.slice(0, 8) + '01'
          break
        case 2:
          this.start = this.nowDate.slice(0, 5) + '01-01'
          break
      }
      this.getSales()
      this.getRegion()
    }
  },
  computed: {
    bgi () {
      return function (index) {
        return {
          backgroundImage: `url(${index === 0
? ''
         : (index === 1
 ? ''
         : index === 2
? ''
         : '')
         })`
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-content {
  height: 166px;
  /* padding: 5px; */
}
.bottom {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.el-row {
  margin-bottom: 20px;
  /* .el-row:last-child {
      margin-bottom: 0;
    } */
}
.el-col {
  border-radius: 4px;
}
.bg {
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(http://likede2-admin.itheima.net/img/empty.87c4f71b.png);
}
.rank {
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 14px;
  }
}
.count {
  background-color: #f8f8f9;
  height: 230px;
  width: 154px;
      padding-top: 47px;
    padding-left: 38px;
}
</style>
